<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽效果轨迹回放</title>
    <style>
    html,
    body {
        overflow: hidden;
    }
    
    body,
    div,
    h2,
    p {
        margin: 0;
        padding: 0;
    }
    
    body {
        color: #fff;
        background: #000;
        font: 12px/2 Arial;
    }
    
    p {
        padding: 0 10px;
        margin-top: 10px;
    }
    
    span {
        color: #ff0;
        padding-left: 5px;
    }
    
    #box {
        position: absolute;
        width: 300px;
        height: 150px;
        background: #333;
        border: 2px solid #ccc;
    }
    
    #box h2 {
        height: 25px;line-height:25px;
        cursor: move;
        background: #222;
        border-bottom: 2px solid #ccc;
        text-align: right;
        padding: 0 10px;
    }
    
    #box h2 a {
        color: #fff;
        font: 12px/25px Arial;
        text-decoration: none;
        outline: none;
    }
    </style>

</head>
<body>
    <div id="box">
        <h2><a href="#">点击回放拖动轨迹</a></h2>
        <p><strong>Drag:</strong><span>false</span></p>
        <p><strong>offsetTop:</strong><span>0</span></p>
        <p><strong>offsetLeft:</strong><span>0</span></p>
    </div>
    <script>
        // 一.实现拖拽效果
        // （1）原理1：
        // 1.在元素上按下mousedown，同时给document添加移动事件mousemove
        // 2 当在元素上鼠标弹起 mouseup,解除给document移动事件 mousemove
        // (2) 原理2：
        // 1. mousedown时，获取光标的位置(clientX||pageX)-大盒子到定位父级(html)的距离 
        //      * var ox = e.clientX - box.offsetLeft
        // 2.mousemove过程，将光标的位置(clientX||pageX)-offsetX赋值给box的样式(box.style.left)
        // 二.改变页面的显示内容
        // 改变drag的innerHTML、改变showTop、showLeft的innerHTML
        // 三、按下、移动过程中都要记录box的位置{x,y}，存放数组
        // 四。给link绑定点击事件，根据数组的值顺序设置box的定位box.style.left即可
        var box = document.getElementById("box");
        var h2 = box.children[0];
        var drag = box.children[1].children[1];
        var showTop = box.children[2].children[1];
        var showLeft = box.children[3].children[1];
        var link = h2.children[0];
        var arr = [];
        var timer;
        h2.onmousedown = function(evt){
            var ox = evt.pageX - box.offsetLeft;
            var oy= evt.pageY - box.offsetTop;
            showTop.innerHTML = box.offsetTop;
            showLeft.innerHTML = box.offsetLeft;
            arr.unshift({x: box.offsetLeft,y: box.offsetTop});
            drag.innerHTML = "true";
            document.onmousemove = function(e){
                box.style.left = e.pageX - ox + 'px';
                box.style.top = e.pageY - oy + 'px';
                showTop.innerHTML = e.pageY - oy;
                showLeft.innerHTML = e.pageX - ox;
                arr.unshift({x:e.pageX - ox,y:e.pageY - oy})
                e.preventDefault();//取消拖拽过程中，文字被选中的默认行为
            }
        }
        h2.onmouseup = function(){
            document.onmousemove = null;
            drag.innerHTML = "false";
        }
        link.onclick = function(){
            clearInterval(timer);
            var i=0;
            timer = setInterval(function(){
                box.style.left = arr[i].x + 'px';
                box.style.top = arr[i].y + 'px';
                i++;
                if(i >= arr.length){
                    clearInterval(timer);
                }
                console.log(arr[i]);
            }, 100)
        }



    </script>
</body>
</html>